<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title></title>
<style>
	p{
		height: 200px;
		background: yellow;
		border: 1px solid;
	}
</style>
</head>
<body>
	<div id="app">
		<p></p>
		<button id="show">显示</button>
		<button id="hide">隐藏</button>
		<button id="toggle">切换</button>
	</div>
	<script>
		//入口函数
		$(function(){
			$('#show').click(function(){
				//代入代出
				 $('p').fadeIn(1000);
				// //下拉下来 动画
				// $('p').slideDown(1000);
				// // $('p').show(1000);
			})
			$('#hide').click(function(){
				//代入代出
				 $('p').fadeOut(1000);
				// $('p').slideUp();
			})
			$('#toggle').click(function(){
				//代入代出
				$('p').fadeToggle(1000);
				 // $('p').fadeTo(1000,0.2);
				// $('p').slideToggle();
			})
			
		})
	</script>
</body>
</html>
